<template>
  <div class="login-wrapper">
    <div class="login-header">
      <span>手机号登录</span>
    </div>
    <div class="login-content">
      <div class="login-desc">
        <div class="desc-header">登录体验更多精彩</div>
        <div class="desc-two-header">未注册手机号登录后将自动创建账号</div>
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="phone"
          type="tel"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="captcha"
          center
          clearable
          name="captcha"
          label="短信验证码"
          placeholder="请输入短信验证码"
          :rules="[{ required: true, message: '请填写短信验证码' }]"
        >
          <template #button>
            <van-button size="small" type="primary" @click="getCaptcha">
              <van-count-down
                v-if="showCountDown"
                :time="time"
                format="ss 秒"
                @finish="finishCountDown"
              />
              <span v-else>发送验证码</span>
            </van-button>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import History from "../components/history.vue";
import { mapMutations } from "vuex";

export default {
  components: {
    History,
  },
  data() {
    return {
      phone: 15363852073,
      captcha: "",
      time: 60 * 1000,
      showCountDown: false,
    };
  },
  methods: {
    ...mapMutations(["setUserInfo", "showLoginPage"]),
    onSubmit(values) {
      //  this.$api.captchaVerify(values);
      // {"message":"验证码错误","code":503,"data":false}
      this.$api.phoneLogin(values).then(
        (res) => {
          if (res.data.code === 200) {
            const data = res.data;
            const userInfo = {
              name: data.profile.nickname,
              uid: data.account.id,
              vipType: data.account.vipType,
              token: data.token,
              backgroundUrl: data.profile.backgroundUrl,
              avatarUrl: data.profile.avatarUrl,
              signature: data.profile.signature,
              cookie: data.cookie,
            };
            this.setUserInfo(userInfo);
            document.cookie = userInfo.cookie;
          }
          this.showLoginPage(false);
          /*
          {
            "loginType": 1,
            "code": 200,
            "account": {
              "id": 609876270,
              "userName": "2_5533834246",
              "type": 2,
              "status": 0,
              "whitelistAuthority": 0,
              "createTime": 1507100163821,
              "salt": "",
              "tokenVersion": 0,
              "ban": 0,
              "baoyueVersion": 0,
              "donateVersion": 0,
              "vipType": 11,
              "viptypeVersion": 1629588022305,
              "anonimousUser": false
            },
            "token": "d3953ba9544fa44af2997e871ff6ba1008a3d0dc281838317c0d17505f549ebca108086b4df3203f",
            "profile": {
              "vipType": 11,
              "gender": 2,
              "followed": false,
              "backgroundUrl": "https://p4.music.126.net/_f8R60U9mZ42sSNvdPn2sQ==/109951162868126486.jpg",
              "detailDescription": "",
              "djStatus": 0,
              "avatarImgId": 3427177765914095,
              "nickname": "AnastasiaCherry",
              "avatarImgIdStr": "3427177765914095",
              "accountStatus": 0,
              "expertTags": null,
              "experts": {},
              "city": 440300,
              "avatarUrl": "https://p3.music.126.net/r1W-LcsKfGTssti8QVplmw==/3427177765914095.jpg",
              "defaultAvatar": false,
              "province": 440000,
              "mutual": false,
              "remarkName": null,
              "authStatus": 0,
              "backgroundImgId": 109951162868126480,
              "birthday": -2209017600000,
              "backgroundImgIdStr": "109951162868126486",
              "userId": 609876270,
              "userType": 0,
              "description": "",
              "signature": "幸幸福福过生活🍀🍀☀️☀️",
              "authority": 0,
              "followeds": 0,
              "follows": 3,
              "eventCount": 0,
              "avatarDetail": null,
              "playlistCount": 2,
              "playlistBeSubscribedCount": 0
            },
            "bindings": [{
              "refreshTime": 1507100495,
              "url": "",
              "tokenJsonStr": "{\"countrycode\":\"\",\"cellphone\":\"13797083411\",\"hasPassword\":false}",
              "expiresIn": 2147483647,
              "bindingTime": 1507100495394,
              "expired": false,
              "userId": 609876270,
              "id": 3223048129,
              "type": 1
            }, {
              "refreshTime": 1507100163,
              "url": "http://weibo.com/u/5533834246",
              "tokenJsonStr": "{\"bind_time\":1.507100162735928E9,\"uid\":\"5533834246\",\"expires_in\":2635437,\"access_token\":\"2.00EF6VCG0Gg46127d0f166840K9WuD\",\"id\":5533834246,\"idstr\":\"5533834246\",\"class\":1,\"screen_name\":\"用户5533834246\",\"name\":\"用户5533834246\",\"province\":\"44\",\"city\":\"3\",\"location\":\"广东 深圳\",\"url\":\"\",\"profile_image_url\":\"http://tvax3.sinaimg.cn/default/images/default_avatar_female_50.gif\",\"profile_url\":\"u/5533834246\",\"domain\":\"\",\"weihao\":\"\",\"gender\":\"f\",\"followers_count\":3,\"friends_count\":48,\"pagefriends_count\":0,\"statuses_count\":5,\"favourites_count\":2,\"created_at\":\"Wed Feb 25 13:15:48 +0800 2015\",\"following\":false,\"allow_all_act_msg\":false,\"geo_enabled\":true,\"verified\":false,\"verified_type\":-1,\"remark\":\"\",\"insecurity\":{\"sexual_content\":false},\"ptype\":0,\"allow_all_comment\":true,\"avatar_large\":\"http://tvax3.sinaimg.cn/default/images/default_avatar_female_180.gif\",\"avatar_hd\":\"http://tvax3.sinaimg.cn/default/images/default_avatar_female_180.gif\",\"verified_reason\":\"\",\"verified_trade\":\"\",\"verified_reason_url\":\"\",\"verified_source\":\"\",\"verified_source_url\":\"\",\"follow_me\":false,\"like\":false,\"like_me\":false,\"online_status\":0,\"bi_followers_count\":0,\"lang\":\"zh-cn\",\"star\":0,\"mbtype\":0,\"mbrank\":0,\"block_word\":0,\"block_app\":0,\"credit_score\":80,\"user_ability\":0,\"urank\":4,\"story_read_state\":-1,\"vclub_member\":0}",
              "expiresIn": 2635437,
              "bindingTime": 1507100163831,
              "expired": true,
              "userId": 609876270,
              "id": 3223048130,
              "type": 2
            }],
            "cookie": "NMTID=00OYrhFnaW_uRLtTk3ak772NLGgoNgAAAF7jB7EOQ; Max-Age=315360000; Expires=Tue, 26 Aug 2031 09:37:11 GMT; Path=/;;MUSIC_U=d3953ba9544fa44af2997e871ff6ba1008a3d0dc281838317c0d17505f549ebca108086b4df3203f; Max-Age=1296000; Expires=Sun, 12 Sep 2021 09:37:11 GMT; Path=/;;__csrf=65fe0eec51c47714fe0ff3d810227878; Max-Age=1296010; Expires=Sun, 12 Sep 2021 09:37:21 GMT; Path=/;;__remember_me=true; Max-Age=1296000; Expires=Sun, 12 Sep 2021 09:37:11 GMT; Path=/;"
          }
          */
        },
        (err) => {
          if (err.message.includes(503)) {
            this.$Toast.fail(`code: 503 验证码错误`);
          }
        }
      );
    },
    getCaptcha() {
      this.$api.getCaptcha(this.phone).then((res) => {
        if (res.data.data) {
          this.showCountDown = true;
        }
        // {"code":200,"data":true}
      });
    },
    finishCountDown() {
      this.showCountDown = false;
    },
  }
};
</script>

<style lang="less">
.login-wrapper {
  .login-header {
    padding: 20px 10px;
    width: 100px;
    margin: auto;
    font-size: 18px;
    font-weight: bold;
  }
  .login-content {
    padding: 10px;
    .login-desc {
      padding: 10px;
      .desc-header {
        font-size: 18px;
        font-weight: bold;
      }
      .desc-two-header {
        font-size: 12px;
        color: #8f8d8d;
      }
    }
  }
}
</style>
